<template>
    <view class="user-container">
      <!-- 头部区域 -->
      <view class="user-header">
        <view class="left">
          <!-- 头像区域 -->
          <image 
            class="avatar" 
            :src="userInfo.avatar ? getAvatar(userInfo.avatar) : defaultAvatar" 
            mode="aspectFill"
          ></image>
          
          <!-- 未登录显示登录按钮 -->
          <text v-if="!loginStatus" class="login" @tap="goToLogin">点击登录</text>
          
          <!-- 已登录显示用户信息 -->
          <view v-else class="user-info">
            <text class="username ellipsis">{{ userInfo.name ? userInfo.name : '用户' + userInfo.phone }}</text>
            <text class="signature ellipsis">{{ userInfo.sign ? userInfo.sign : '暂无签名' }}</text>
          </view>
        </view>
      </view>
  
      <!-- 主要内容区域 -->
      <view class="user-main">
        <view class="card">
          <view class="grid">
            <!-- 个人信息 -->
            <view class="grid-item" v-if="loginStatus" @tap="goToUserInfo">
              <image class="icon" src="/static/images/user/friends.png"></image>
              <text class="text">个人信息</text>
            </view>
            
            <!-- 我的订单 -->
            <view class="grid-item" @tap="goToUserOrder">
              <image class="icon" src="/static/images/user/coupon.png"></image>
              <text class="text">我的订单</text>
            </view>
            
            <!-- 想看 -->
            <view class="grid-item" @tap="goToUserMovie">
              <image class="icon" src="/static/images/user/history.png"></image>
              <text class="text">想看</text>
            </view>
            
            <!-- 看过 -->
            <view class="grid-item" @tap="goToUserHistory">
              <image class="icon" src="/static/images/user/eye.png"></image>
              <text class="text">看过</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        userInfo: {},
        defaultAvatar: '/static/images/user/userIcon.png',
        loginStatus: false
      }
    },
    onShow() {
      this.loadUserInfo()
    },
    methods: {
      // 获取头像完整路径
      getAvatar(path) {
        return 'http://localhost:9090' + path
      },
      
      // 加载用户信息
      // 加载用户信息
loadUserInfo() {
  const uid = uni.getStorageSync('UID')
  if (uid) {
    // 添加日志便于调试
    console.log('开始加载用户信息，用户ID:', uid)
    
    uni.request({
      // 确保使用正确的 API 路径
      url: 'http://localhost:9090/findOneUserInfo', // 根据实际情况调整
      method: 'GET',
      data: {
        id: uid
      },
      success: (res) => {
        console.log('用户信息响应:', res.data)
        if (res.data.code === 1) {
          this.userInfo = res.data.user
          this.loginStatus = true
          console.log('用户信息加载成功:', this.userInfo)
        } else {
          console.log('获取用户信息失败:', res.data.msg)
          this.loginStatus = false
          this.userInfo = {}
        }
      },
      fail: (err) => {
        console.log('请求失败:', err)
        this.loginStatus = false
        this.userInfo = {}
      }
    })
  } else {
    console.log('未找到用户ID，显示未登录状态')
    this.loginStatus = false
    this.userInfo = {}
  }
},
      
      // 页面跳转方法
      goToLogin() {
        uni.navigateTo({
          url: '/pages/login/login'
        })
      },
      
      goToUserInfo() {
        uni.navigateTo({
          url: `/pages/user-info/user-info?UID=${this.userInfo.id}`
        })
      },
      
      goToUserOrder() {
        uni.navigateTo({
          url: `/pages/user-order/user-order?UID=${this.userInfo.id}`
        })
      },
      
      goToUserMovie() {
        uni.navigateTo({
          url: `/pages/user-movie/user-movie?UID=${this.userInfo.id}`
        })
      },
      
      goToUserHistory() {
        uni.navigateTo({
          url: `/pages/user-history/user-history?UID=${this.userInfo.id}`
        })
      }
    }
  }
  </script>
  
  <style>
  .user-container {
    height: 100vh;
    width: 100%;
  }
  
  .user-header {
    height: 240rpx;
    background-color: rgba(3, 3, 3, 0.67);
  }
  
  .left {
    width: 280rpx;
    padding: 60rpx 0;
    margin: 0 0 0 60rpx;
    align-items: center;
    display: flex;
    position: relative;
  }
  
  .avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
  }
  
  .login {
    position: absolute;
    left: 140rpx;
    color: #ffffff;
  }
  
  .user-main {
    padding-top: 40rpx;
  }
  
  .card {
    padding: 4rpx 0;
    width: 80%;
    border-radius: 20rpx;
    position: relative;
    top: -55rpx;
    left: 10%;
    background-color: #fff;
    box-shadow: 0 11.5rpx 16rpx #666;
  }
  
  .user-info {
    width: 100%;
    position: absolute;
    left: 130rpx;
    display: flex;
    flex-direction: column;
  }
  
  .username {
    font-size: 29rpx;
    line-height: 29rpx;
    margin-bottom: 8rpx;
    color: #ffffff;
  }
  
  .signature {
    font-size: 20rpx;
    color: #ffffff;
  }
  
  .grid {
    display: flex;
    flex-wrap: wrap;
    padding: 20rpx;
  }
  
  .grid-item {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx 0;
  }
  
  .icon {
    width: 48rpx;
    height: 48rpx;
    margin-bottom: 10rpx;
  }
  
  .text {
    font-size: 24rpx;
    color: #333;
  }
  
  .ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  </style>